<template>
    <view class="big">
        <view class="title">
            {{ customerName }}交款
        </view>
     <scroll-view scroll-y="true"  :style="{height: contentHeight + 'px'}"  class="center">
        <view  v-for="(item,index) in banklist" :key="index"  class="swiper">
            <view class="bgc" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" :style="{marginLeft:(isActive === index?marginLeft+'rpx':'')}" 
            :data-index="index">
                <view class=" pd one">
                <text>收款方式</text>
            </view>
            <view class="pd two bold">
                <view>{{banks[index].name}}</view>
                <view>{{banks[index].bankAccount}}</view>
            </view>
            <view class="flex j-content-end pd">
                <view class="bold">单据金额：￥{{ item.taxAmount }}</view>
            </view>
            </view>
            <view class="leftmove" @click="remove(index)">删除</view>
        </view>
        
     </scroll-view>
     <view class="flex j-content-end bottom-button">
            <text class="bule" @click="getpay">收款</text>
            <button size="mini" class="button" @click="save">保存</button>
     </view>
     <view class=" bottom">
        <view class="bottomleft bottom-top">
            <text class="grey">金额合计</text>
            <view>{{sum}}</view>
        </view>
        <view class=" bottom-top">
            <text class="grey">欠款合计</text>
            <view>{{paysum}}</view>
        </view>
     </view>
     <uni-popup  ref="popup" type="bottom" >
        <addpay :customerId="customerId" :customerName="customerName" @bank="bank"></addpay>
    </uni-popup>
    </view>
</template>

<script>
import { pay,debtAmount,newpay,newdebtAmount} from "../../service/api/payorder";
import { getScreen} from "../../service/auth";
import addpay from "../components/addpay";
export default {
name:'debtList',
components:{addpay},
data() {
    return {
        contentHeight:0,
        customerId:'',
        customerName:'',
        banklist:[],
        sum:0,
        paysum:0,
        banks:[],
        marginLeft: 10, //上限170
      x:0,
      left: false,
      isActive:null,
      pay:''
    }
},
onLoad(option){
    const app = getApp()
    if(option.customerId==app.globalData.customer.id){
        this.customerName=app.globalData.customer.name
    }
    console.log('jjjjjjjjjjj',app)
    this.customerId=option.customerId
    this.pay=option.pay
    this.banklist=uni.getStorageSync(this.customerId+'banklist')|| []
    this.banks=uni.getStorageSync(this.customerId+'banks')|| []
    this.sum=uni.getStorageSync(this.customerId+'sum') || 0
    if (this.pay) {
      newdebtAmount({ customerId:this.customerId}).then(res=>{
            this.paysum=res.data
          })
    }else{
      debtAmount({ customerId:this.customerId}).then(res=>{
            this.paysum=res.data
          })
    }
    
},
created() {
    const {width,height} = getScreen()
    this.contentHeight = height - (340 * width / 750)
    
  },
methods: {
   
    save(){
        const data={
            customerId:this.customerId,
            bankList:this.banklist
        }
        if (this.pay) {
          newpay(data).then(res=>{
            this.banklist=[],
            this.banks=[],
            this.sum=0,
            uni.removeStorageSync(this.customerId+'banklist')
            uni.removeStorageSync(this.customerId+'banks')
            uni.removeStorageSync(this.customerId+'sum')
        })
        }else{
          pay(data).then(res=>{
            this.banklist=[],
            this.banks=[],
            this.sum=0,
            uni.removeStorageSync(this.customerId+'banklist')
            uni.removeStorageSync(this.customerId+'banks')
            uni.removeStorageSync(this.customerId+'sum')
        })
        }
        
    },
    getpay(){
        this.$refs.popup.open()
    },
    bank(e,a){
      console.log(typeof(this.banklist),'jjjjj',typeof(this.banks));
      // this.banklist=[]
      //   this.banks=[]
      console.log(this.banklist)
        this.banklist.push(e)
        this.banks.push(a)
        
        if (this.banklist.length) {
          this.sum=0
          this.banklist.map(item=>{
          this.sum+=item.taxAmount*1
        })
        }else{
          this.sum=0
        }
        uni.setStorageSync(this.customerId+'banklist',this.banklist)
        uni.setStorageSync(this.customerId+'banks',this.banks)
        uni.setStorageSync(this.customerId+'sum',this.sum)
        this.$refs.popup.close()
    },
    touchstart(e){
        
      const touch = e.touches[0] || e.changedTouches[0]
      this.x = touch.clientX
    },
    touchmove(e){
      const index= e.currentTarget.dataset.index
      this.isActive=index
      if (!this.banklist.length)return
      const touch = e.touches[0] || e.changedTouches[0]
      const marginLeft = (touch.clientX - this.x) >> 0
      if (this.left){
        if (marginLeft < 0){
          this.marginLeft =  -160
        }else if (marginLeft > 170){
          this.marginLeft = 10
        }else {
          this.marginLeft = -160 + marginLeft
        }
      }else {
        if (marginLeft < -160){
          this.marginLeft =  -160
        }else if (marginLeft > 10){
          this.marginLeft = 10
        }else {
          this.marginLeft = marginLeft
        }
      }
      
    },
    touchend(e){
      if (this.marginLeft < -80){
        this.marginLeft =  -160
        this.left = true
      }else {
        this.marginLeft = 10
        this.left = false
      }
    },
    remove(i){
        this.banklist.splice(i,1)
        this.banks.splice(i,1)
        if (this.banklist.length) {
          this.sum=0
          this.banklist.map(item=>{
          this.sum+=item.taxAmount*1
        })
        }else{
          this.sum=0
        }
        uni.setStorageSync(this.customerId+'banklist',this.banklist)
        uni.setStorageSync(this.customerId+'banks',this.banks)
        uni.setStorageSync(this.customerId+'sum',this.sum)
    }
},
}
</script>

<style lang="scss" scoped>

 .big{
    background-color: #f6f7f7;
    // background-color: #daae42;
    position: relative;
  .title{
    line-height: 100rpx;
    font-size: 40rpx;
    font-weight: bold;
    position: fixed;
    z-index: 999;
    background-color: white;
    width: 100%;
    padding: 0 20rpx;
}
.center{
    top: 100rpx;
    position: relative;
    background-color: #f6f7f7;
    .swiper{
    position: relative;
    display: flex;
    
    .bgc{
    background-color: white;
    margin: 15rpx;
    border-radius: 15rpx;
    min-height: 260rpx;
    width: 100%;
    z-index: 2;
    transition: margin-left linear 0.1s;
    .pd {
    padding: 15rpx 20rpx;
    color: grey;
	}
    .one{
        font-size: 26rpx;
    }
    .two{
    margin: 0rpx 0 10rpx;
    border-bottom: 1rpx solid #f3eded;
    font-size: 35rpx;
    }
    .three{
        font-size: 28rpx;
    }
    .bold{
        font-weight: bold;
        color: black;
    }
  }
  .leftmove{
    position: absolute;
    z-index: 1;
    width:140rpx;
    background: red;
    color: #ffffff;
    border-radius: 20rpx;
    text-align: center;
    right: -10rpx;
    margin:18rpx 28rpx;
    line-height: 250rpx;
  }
}
}
  .bottom{
    margin: 20rpx 0;
      width: 98vw;
      left: 1%;
      position: fixed;
      bottom:80rpx;
      background-color: #f6f7f7;
      // background-color: #59e8e8;
      border-radius: 8rpx;
      line-height: 40rpx;
    box-sizing: border-box;
    padding: 20rpx;
      .bottom-top{
          text-align: center;
          width: 50%;
          display: inline-block;
          .grey{
            color: grey;
          }
      }
      .bottomleft{
          border-right: 1rpx solid grey;
      }
      
  }
  .bottom-button{
      position: fixed;
      bottom:0rpx;
      right: 0;
      line-height: 70rpx;
    padding: 5rpx 0;
    box-sizing: border-box;
    .button{
        background-color: #22AEFF;
        color: #fff;
        border-radius: 0;
        margin-left: 40rpx;
      }
      .bule{
          color: #22AEFF;
      }
  }
}
</style>